import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Alert } from 'react-native';
import { StateScreen, Constants, PageControl, StateScreenRef,Text } from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

const localImageSource = require('../../assets/images/empty-state.jpg');
const localImageSource1 = require('../../assets/images/card-example.jpg');
const remoteImageSource = {
  uri: 'https://cdn.pixabay.com/photo/2017/04/19/20/10/morning-2243465_1280.jpg',
};

type State = {
  currentPage: number;
};

export default class EmptyStateScreen extends Component<{}, State> {
  state = { currentPage: 0 };

  setCurrentPage(offsetX: number) {
    if (offsetX >= 0) {
      this.setState({
        currentPage: Math.floor(offsetX / Constants.screenWidth),
      });
    }
  }

  ref = React.createRef<StateScreenRef>();

  render() {
    return (
      <TestSuite name="StateScreen">
        <TestCase itShould="设置 imageSource">
          <View padding-10>
            <StateScreen
              imageSource={localImageSource}
            />

            <StateScreen
              imageSource={localImageSource1}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 title">
          <View padding-10>
            <StateScreen
              imageSource={localImageSource}
              title={'title1'}
            />

            <StateScreen
              imageSource={localImageSource}
              title={'title2'}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 ctaLabel">
          <View padding-10>
            <StateScreen
              title={'title'}
              ctaLabel={'OK1'}
              imageSource={localImageSource}
            />

            <StateScreen
              title={'title'}
              ctaLabel={'OK2'}
              imageSource={localImageSource}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 onCtaPress">
          <View padding-10>
            <StateScreen
              title={'title'}
              ctaLabel={'OK'}
              imageSource={localImageSource}
              onCtaPress={() => {
                Alert.alert('onCtaPress');
              }}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 testID">
          <View padding-10>
            <StateScreen
              title={'Oppsie (with local image)'}
              ctaLabel={'OK'}
              ref={this.ref}
              testID="StateScreenID"
              imageSource={localImageSource}
              onCtaPress={() => {
                Alert.alert('onCtaPress  testID:' + (this.ref.current?.testID ?? "StateScreenID"));
              }}
            />
            <Text> </Text>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  pageView: {
    width: Constants.screenWidth - 40,
    height: Constants.screenHeight,
  },
});
